<script setup>
import { ref } from 'vue'
import { store } from '../../store/avgstore.js'

const list = ref([])
fetch(`/exilium/avg/${store.cptId}/${store.avgNo}.json`)
  .then(response => response.json())
  .then(json => list.value = json)

function returnToChapter() {
  store.viewIdx = 1
}
</script>

<template>
  <section>
    <nav>
      <button @click="returnToChapter">返回</button>
    </nav>
    <h1>{{ store.avgName }}</h1>
    <div v-for="(script, idx) of list" class="part">
      <h2>第{{ idx + 1 }}部分</h2>
      <div v-for="line of script" class="line">
        <p v-for="subline of line.split('|')" class="subline">{{ subline }}</p>
      </div>
    </div>
  </section>
</template>

<style scoped>
.part {
  border: 1px solid;
  padding: 1em;
}
.line {
  border: 1px solid;
}
.line:nth-child(n+2) {
  margin-top: 0.5em;
}
.subline:nth-child(n+2) {
  border-top: 1px solid;
}
</style>